<template>
  <el-dialog
    ref="refExeDlg"
    title="开业执行"
    :visible.sync="dialogShow"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :before-close="clearForm"
    width="800px"
    top="0vh"
    @close="closeDialog"
  >
    <div>
      <el-form ref="refForm" :rules="formRules" :model="formData" size="mini">
        <el-row>
          <el-col :span="12">
            <el-form-item label="门店建设项目号:" prop="constCode">
              {{ detailData.constCode }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属门店:" prop="shopName">
              {{ detailData.shopName }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="开业记录号:" prop="openingCode">
              {{ detailData.openingCode }}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="实际开业开始时间:" prop="actualActivityStartTime">
              <el-date-picker
                v-model="formData.actualActivityStartTime"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="date"
                :picker-options="pickerOptions"
                size="mini"
                placeholder="选择时间"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实际开业结束时间:" prop="actualActivityEndTime">
              <el-date-picker
                v-model="formData.actualActivityEndTime"
                type="date"
                :picker-options="pickerOptions"
                size="mini"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择时间"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="现场活动照片(不少于2张):">
              <br>
              <import-img
                :photo-list="imgList"
                :config-attachment-id="imgConfigId||''"
                @upload-success="uploadSuccessImg"
                @remove="removeImg"
              />
            </el-form-item>
          </el-col>

        </el-row>
        <el-row>
          <el-col>
            <el-form-item label="开业评估资料:">
              <import-file
                :data="fileList"
                :file-type="fileTypeName"
                :config-attachment-id="fileConfigId"
                :limit="20"
                @remove="changeFile"
                @upload-success="changeFile"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div slot="footer">
      <el-button size="mini" @click="closeDialog">取消</el-button>
      <el-button :loading="saveLoading" size="mini" type="primary" @click="submitForm">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import importImg from '@/components/importImg/index'
import importFile from '@/components/importFile/index'

import { getShopAttachment } from '@/api/common.js'

import { saveOpenState, postConfigAttachmentTemplate } from '@/api/shopOpenManage'
export default {
  name: 'DemoEditForm',
  components: { importImg, importFile },
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    detailData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        } },
      saveLoading: false,
      fileConfigId: '',
      fileTypeName: '',
      imgConfigId: '',
      imgList: [],
      fileLength: 0,
      fileList: [], // 评估表
      otherFileList: [],
      formData: {
        id: '',
        schedule: '',
        constCode: '',
        actualActivityStartTime: '',
        actualActivityEndTime: '',
        shopAttachmentDTOList: []
      },
      formRules: {
        actualActivityStartTime: [
          { required: true, message: '请选择实际开业活动开始日期', trigger: 'change' }
        ],
        actualActivityEndTime: [
          { required: true, message: '请选择实际开业活动截止日期', trigger: 'change' }
        ]
      }
    }
  },

  computed: {
    dialogShow: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },

  async  created() {
    await postConfigAttachmentTemplate().then(res => {
      if (res.success === 1 && res.data.records.length > 0) {
        res.data.records.map(el => {
          if (el.attachmentType === '现场活动照片') this.imgConfigId = el.id
          else if (el.attachmentType === '开业评估资料') {
            this.fileConfigId = el.id
            this.fileTypeName = el.fileTypeName
          }
        })
      }
    })
    this.getFiles()
  },

  methods: {
    // 文件上传成功
    changeFile(data) {
      this.fileLength = data.fileLength
      this.fileList = data.list
    },
    closeDialog() {
      this.dialogShow = false
      this.clearForm()
    },

    clearForm(done) {
      this.formData = { }
      this.$refs.refForm && this.$refs.refForm.clearValidate()
      done && done()
    },
    // 获取附件
    getFiles() {
      getShopAttachment(this.detailData.id).then(res => {
        res.data.map(el => {
          if (el.attachmentType === '现场活动照片') this.imgList.push(el)
          else if (el.attachmentType === '开业评估资料') this.fileList.push(el)
          else this.otherFileList.push(el)
        })
      })
    },
    // 删除图片
    removeImg(data) {
      this.imgList = data.list
    },
    // 图片上传成功
    uploadSuccessImg(data) {
      this.imgList = data.list
    },
    // 提交表单处理
    submitForm() {
      this.$refs['refForm'].validate((valid) => {
        if (valid) {
          const imgLength = this.imgList.filter(row => row.dr !== 1)
          const fileLength = this.fileList.filter(row => row.dr !== 1)
          if (imgLength.length < 2 && fileLength.length === 0) {
            this.$message.warning('请上传两张以上的【现场活动图】以及【开业评估资料】')
            return
          }
          if (imgLength.length < 2 && fileLength.length !== 0) {
            this.$message.warning('请上传两张以上的【现场活动图】')
            return
          }
          if (imgLength.length >= 2 && fileLength.length === 0) {
            this.$message.warning('请上传【开业评估资料】')
            return
          }
          this.saveLoading = true
          this.formData.id = this.detailData.id
          this.formData.schedule = this.detailData.schedule
          this.formData.constCode = this.detailData.constCode
          this.formData.shopAttachmentDTOList = [...this.imgList, ...this.fileList, ...this.otherFileList]
          saveOpenState(this.formData).then(res => {
            if (res.success === 1) {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.closeDialog()
              this.$emit('success')
              this.saveLoading = false
            }
          }).catch(() => {
            this.saveLoading = false
          })
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.img-upload-container {
  width: fit-content;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  .icon-msg{
    margin-left: 10px;
    color: #999;
  }
}
/deep/.el-dialog .el-dialog__body{
    max-height: 450px;
    overflow: auto;
}
// /deep/.el-dialog{
//   max-height: 700px;
//   overflow: auto;
// }
</style>
